<!DOCTYPE html>
<html>
<head>
    <title>农商互联开发平台</title>
    <link href="/static/css/framework-font.css" rel="stylesheet"/>
    <script src="/static/js/jquery-2.1.1.js"></script>
    <script src="/static/bootstrap/js/bootstrap.js"></script>
    <link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet"/>

    <script src="/static/js/jquery.cookie.js"></script>
    <link href="/static/css/framework-theme.css" rel="stylesheet"/>
    <!--    <script src="/static/js/framework-ui.js"></script>-->
    <!--    <script src="/static/js/framework-clientdata.js"></script>-->

    <!--弹框js-->
    <script src="/static/js/yii.js"></script>

    <!--引用layui弹框插件-->
    <script src="/static/layui/layui.all.js"></script>
    <script src="/static/layui/layui.js"></script>
    <link href="/static/layui/css/layui.css" rel="stylesheet"/>
    <script src="/static/layui/lay/modules/layer.js"></script>


    <!--    配置select多选相关-->
    <!--    <script src="/static/layui/dist/xm-select.js"></script>-->

        {if condition="$swidthStyle eq 0"}
    <link href="/static/css/pattern/public.css" rel="stylesheet"/>
    {else/}
        {if condition="$swidthStyle eq 0"}
    <link href="/static/css/pattern/public.css" rel="stylesheet"/>
    {else/}
    <link href="/static/css/default/public.css" rel="stylesheet"/>
    {/if}
    {/if}


</head>
<body>
<style>
    .error {
        display: block;
        color: red
    }

    html, body {
        background-color: #FFF !important;
    }

    .modal-body {
        background-color: #fff;
        padding: 15px
    }

    .page-header {
        margin-top: 15px !important;
    }

    .geographic input {
        width: 100px !important;
        float: left;
        margin-right: 15px;
    }

    .config_img {
        margin-top: 15px;
        width: 100px;
    }
    .form-horizontal .control-label{padding:7px 0px;}
    .svg{background-image: url("/static/images/timg.jpg");height:650px;width:100%;background-repeat: no-repeat;position: fixed;top:90px;}
    .svg_content{width: 285px;height:510px;position: relative;margin-left:17px;margin-top:60px;overflow: hidden}
    .svg_content .thumb img{width:100%;height:100%;margin-top:3px;}
    .svg_content .writing{position: absolute;top:0px;left:0px;}
</style>

<div class="modal-body">


    <div class="page-header">
        <h3>添加平台动画</h3>
    </div>

    <form class="form-horizontal layui-form col-sm-8" name="form1">


        <div class="form-group">
            <label class="col-sm-1 control-label">*主题:</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" name="title" placeholder="主题">
                <p class="error"></p>
            </div>
        </div>


        <div class="form-group">
            <label class="col-sm-1 control-label">*背景图:</label>
            <div class="col-sm-10">
                <div class="input-group ">
                    <input type="text" id="thumb" name="thumb" value="" class="form-control" autocomplete="off">
                    <span class="input-group-btn">
                        <button class="btn btn-default upload" type="button" data-val="thumb" data-original-title=""
                                title="">选择图片</button>
                    </span>
                </div>
                <img class="config_img thumb" src="/static/images/nopic-107.png">
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-1 control-label">文字图片:</label>
            <div class="col-sm-10">
                <div class="input-group ">
                    <input type="text" id="writing" name="writing" value="" class="form-control" autocomplete="off">
                    <span class="input-group-btn">
                        <button class="btn btn-default upload" data-val="writing" type="button" data-original-title=""
                                title="">选择图片</button>
                    </span>
                </div>
                <img class="config_img writing" src="/static/images/nopic-107.png">
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-1 control-label">X轴:</label>
            <div class="col-sm-2">
                <input type="number" id="x_view" class="form-control" name="x_view" value="0" placeholder="X轴">
            </div>
            <label class="col-sm-1 control-label">Y轴:</label>
            <div class="col-sm-2">
                <input type="number" id="y_view" class="form-control" name="y_view" value="0" placeholder="Y轴">
            </div>
        </div>


        <div class="form-group">
            <label class="col-sm-1 control-label">背景音乐:</label>
            <div class="col-sm-10">
                <div class="input-group js_photos">
                    <input type="file" name="voice" class="do_upload" data-val="voice" style="display: none">
                    <input type="text" class="form-control voice" disabled value="">
                    <span class="group-span-filestyle input-group-btn" tabindex="0">
                    <label class="btn btn-default id_photos" data-original-title="" title="">
                        <span class="glyphicon glyphicon-folder-open"></span>
                        上传
                    </label>
                </span>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-1 control-label">启用状态:</label>
            <div class="col-sm-4">
                <select name="status">
                    {volist name="audit" id="vo"}
                    <option value="{$key}" {if condition="$key eq 2"} selected {/if}>{$vo}</option>
                    {/volist}
                </select>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-1 control-label">播放时间:</label>
            <div class="col-sm-4">
                <input type="number" class="form-control" name="times" value="3" placeholder="播放时间">
                <p class="error"></p>
            </div>


        </div>

        <div class="form-group">
            <label class="col-sm-1 control-label">排序:</label>
            <div class="col-sm-4">
                <input type="number" class="form-control" name="sort" placeholder="排序">
                <p class="error"></p>
            </div>
        </div>



    </form>

    <div class="col-sm-4 new_right">
        <div class="svg">
            <div class="svg_content">
            </div>
        </div>
    </div>

</div>
<div class="add_button">

    <div class="form-group">
        <label class="col-sm-1 control-label"></label>
        <div class="col-sm-10">
            <a type="button" class="layui-btn layui-btn-primary" href="{:URL('admin/cartoon/index')}">取消</a>
            <button type="button" class="layui-btn" id="newsave">保存</button>
        </div>
    </div>
</div>


<script>

    $(function () {
        $(this).find('.modal-dialog').css({
            'width': '1000px'
        });
    });

    $("#x_view").bind('input porpertychange',function(){
        var ss=$("#x_view").val();
        $(".writing").css("left",ss+"%");
    });

    $("#y_view").bind('input porpertychange',function(){
        var ss=$("#y_view").val();
        $(".writing").css("top",ss+"%");
    });

    $(".id_photos").click(function () {
        $(this).parent().parent().find(".do_upload").click();
    });
    $('.js_photos').on('change','.do_upload',function(){
        var content = $(this).attr("data-val");
        var formData = new FormData();
        var name = $($(this)).val();
        var files = $($(this))[0].files[0];
        formData.append("file", files);
        formData.append("name", name);
        //另外加的参数
        formData.append("act", "PostImg");
        // var index = layer.msg('正在提交中....');

        $.ajax({
            url: "{:URL('common/upload/textUpload')}",
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            dataType: 'json',
            success:function (res) {
                if(res.code!=0){
                    layer.alert(res.msg);
                }else{
                    $("."+content).val(res.path);
                }
            }
            ,error:function (res) {
                alert('错误');
            }
        });
    })


    var newModal = new yii.modal();

    //单图片选择
    $(".upload").click(function () {
        var newkey = $(this).attr("data-val");
        $(newModal.getid()).show();
        newModal.initialization({
            url: "{:URL('common/upload/index')}",
            type: "post",
            data: {
                type: 'detail',
                newkey: newkey
            }
        });
    });

    newModal.on("upload", function (data) {
        var images = '';
        $(newModal.getid()).find("#data-area .newimages .active img").each(function () {
            images = $(this).attr('src');
            return false
        })
        var newkey = $(newModal.getid()).find(".js_add").attr("data-val");

        $(newModal.getid()).hide();
        //$(".modal-backdrop").remove();
        //$('#nowMainProjectDataForm').modal('hide');
        $(newModal.getid()).find(".modal").hide();
        $("#" + newkey).val(images);
        $("." + newkey).attr("src", images);
        $(".svg_content ."+newkey).remove();
        var html = "<div class='"+newkey+"'><img src='"+images+"' ></div>";
        $(".svg_content").append(html);
    });
    //单图片选择end


    layui.use(['form', 'layedit', 'tree', 'util', 'table', 'laydate'], function () {
        var form = layui.form
            , layer = layui.layer;
        var layedit = layui.layedit;
        var laydate = layui.laydate;


        $("#newsave").click(function () {
            var data = $("form[name='form1']").serializeArray();
            $.ajax({
                type: 'post',
                url: "{:URL('admin/cartoon/doCartoon')}",
                data: data,
                dataType: 'JSON',
                success: function (res) {
                    if (res.code != 0) {
                        layer.alert(res.msg);
                    } else {
                        window.location.href = "{:URL('admin/cartoon/index')}";
                    }
                },
                error: function (res) {

                }
            });
        });


    });
</script>

</body>
</html>